<template>
  <el-drawer v-model="dialogVisible" title="培训记录" size="80%">
    <el-table :data="tableData" row-key="id" height="90%" stripe>
      <el-table-column
        prop="content"
        label="培训内容"
        fixed="left"
        show-overflow-tooltip
      />
      <el-table-column prop="progress" label="培训进度" fixed="left" />
      <el-table-column prop="result" label="培训结果" show-overflow-tooltip />
      <el-table-column prop="user.real_name" label="培训员" />
      <el-table-column prop="create_time" label="创建时间" />
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-drawer>
</template>

<script setup lang="ts">
import { trainLogApi } from "@/api/company/train";
import { ref } from "vue";
const dialogVisible = ref(false);
const student_id = ref(0);
const tableData = ref([]);
const curPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
function getTableInfo() {
  trainLogApi({
    student_id: student_id.value,
    page: curPage.value,
    page_size: pageSize.value,
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
const dialogOpen = (id: number) => {
  dialogVisible.value = true;
  student_id.value = id;
  getTableInfo();
};
const handleSizeChange = (e: any) => {
  pageSize.value = e;
  getTableInfo();
};
const handleCurrentChange = (e: any) => {
  curPage.value = e;
  getTableInfo();
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-select {
  width: 200px;
}
.upload-demo {
  .el-icon svg {
    height: 3em;
    width: 3em;
  }
}
</style>

<style lang="scss" scoped></style>
